<template>
  <a-modal v-model:open="visible" :footer="null" :maskClosable="false" v-bind="$attrs" @cancel="handleClosed" :width="520" class="modal">
    <div class="ant-modal-header">
      <div class="ant-modal-title">
        <div class="share">
          <span style="font-size: 17px; font-weight: normal">{{ title }}</span>
          <div>
            <div style="width: 100%; background-color: red; margin: 0px auto">
              <Icon
                icon="ant-design:folder-open-outlined"
                class="file-icon"
                style="font-size: 16px; color: rgb(253, 202, 7); display: inline-flex; margin: 10px 220px auto"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="ant-modal-body">
      <div class="file-form" style="margin-top: 20px">
        <div class="file-item">
          <div class="file-item-label">名称</div>
          <div>
            <span class="file-item-content" style="width: 90%">{{ formData.fileName }}</span>
          </div>
        </div>
        <div class="file-item">
          <div class="file-item-label">分享链接</div>
          <div class="pointer" style="padding-top: 6px; width: 280px; float: left">
            <a-dropdown :trigger="['click']">
              <span class="ant-dropdown-link ant-dropdown-trigger">
                {{ formData.sharePermsName }}
                <Icon icon="ant-design:down-outlined" style="font-size: 16px; display: inline-flex" />
              </span>
              <template #overlay>
                <a-menu>
                  <a-menu-item class="left-menu-item" @click="handleMenuClick(1)"> 关闭分享 </a-menu-item>
                  <a-menu-item v-if="false" class="left-menu-item" @click="handleMenuClick(2)"> 允许所有联系人查看 </a-menu-item>
                  <a-menu-item class="left-menu-item" @click="handleMenuClick(3)"> 允许任何人查看 </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
        <div v-show="formData.sharePerms == 3" style="width: 100px; float: left">
          <a-popover placement="bottom">
            <template #content>
              <div style="padding: 12px 16px">
                <a-input id="copyFile" v-model:value="formData.shareUrl" class="share-input" />
                <span class="share-span" :data-clipboard-text="formData.shareUrl" @click="handleCopyClick">复制链接</span>
              </div>
            </template>
            <a-button> 复制链接 </a-button>
          </a-popover>
        </div>
        <div class="file-item closed-tip" style="float: left; width: 100%">
          <div class="file-item-label"></div><div style="font-size: 13px"> 链接已关闭，开启后可进行共享 </div>
        </div>
      </div>
    </div>

    <template #footer>
      <a-button @click="handleClosed">取 消</a-button>
      <a-button type="primary" @click="handleOk">创 建</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { saveOrUpdate } from '../files.api';
  import { message } from 'ant-design-vue';
  import linkImg from '/@/assets/images/link.png';
  import Clipboard from 'clipboard';

  export default defineComponent({
    name: 'FileLinkAddModal',
    components: {},
    emits: ['success', 'closed'],
    setup(props, { emit }) {
      //弹窗显隐标记
      const visible = ref(false);
      //标题
      const title = ref('');

      // 表单提交
      const formData = reactive({
        fileId: '',
        fileName: '',
        sharePerms: '',
        sharePermsName: '',
        shareUrl: '',
      });

      const clipboard = new Clipboard('.share-span');
      clipboard.on('success', () => {
        message.success('复制链接地址成功');
      });
      clipboard.on('error', () => {
        message.error('该浏览器不支持自动复制');
      });

      //显示modal
      function showModal(record) {
        formData.fileId = record.id;
        formData.fileName = record.fileName;
        formData.shareUrl = '/api-upms/sys/files/share?' + 'fileId=' + record.id + '&rootId=';
        setShareRperms(record.sharePerms);
        visible.value = true;
        title.value = '分享';
      }

      //设置分享权限显示
      function setShareRperms(sharePerms) {
        console.log('setShareRperms', sharePerms);
        formData.sharePerms = sharePerms;
        if (sharePerms == 1) {
          formData.sharePermsName = '关闭分享';
        } else if (sharePerms == 2) {
          formData.sharePermsName = '允许所有联系人查看';
        } else if (sharePerms == 3) {
          formData.sharePermsName = '允许任何人查看';
        } else {
          formData.sharePermsName = '';
        }
      }

      function handleClosed() {
        visible.value = false;
        if (clipboard) {
          clipboard.destroy();
        }
        emit('closed');
      }

      async function handleMenuClick(val) {
        const params = {
          id: formData.fileId,
          sharePerms: val,
        };
        await saveOrUpdate(params, true);
        setShareRperms(val);
      }

      return {
        visible,
        title,
        formData,
        linkImg,
        showModal,
        handleClosed,
        handleMenuClick,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import '../less/FileIcon';

  .modal .ant-modal-header {
    background-color: #f5f5f5 !important;
  }
</style>
